<template>
  <div>
    <div class="wrapper">
      <div class="logo">
        <!-- <img src="~@/assets/images/manhua/faxian_1@3x.png" > -->
      </div>
      <div class="userInput">
        <div class="inputBox">
          <van-field class="textinput" type="text" clearable v-model="subObject.mobile" placeholder="请输入手机号" />
        </div>
        <div class="inputBox">
          <van-field class="textinput" type="text" v-model="subObject.code" placeholder="请输入验证码" />
          <div class="forget" @click="getVeri">{{ getVerify }}</div>
        </div>
      </div>
      <div class="m_button" @click="login">
        <div class="c_button">
          {{type === 'bind' ? '绑定' : '登录'}}
        </div>
      </div>
      <!-- <div class="toRegister" @click="()=>$router.push('/register')">立即注册</div> -->
    </div>
  </div>
</template>

<script>
import { mineApi } from '@/api'
export default {
  components: {
  },
  async created() {
    this.type = this.$route.query.type
    const inviteCode = this.$route.query.inviteCode
    this.inviteCode = inviteCode
    if (!inviteCode) {
      return
    }
    const res = await mineApi.getInfoByInviteCode(inviteCode)
    console.log('res', res)

    this.inviteInfo = res.data
    this.inviteInfo.HeadImg = this.inviteInfo.head_img
    this.inviteInfo.NickName = decodeURIComponent(this.inviteInfo.nickname)
    // this.inviteInfo.PersonalizedSignature = decodeURIComponent(this.inviteInfo.nickname)
  },
  data() {
    return {
      topResource: {
        centerCont: ''
      },
      type: '',
      getVerify: '获取验证码',
      subObject: {
        mobile: ''
        // username: 1,
        // wechatId: 1,
        // wechatUnion: 123232,
        // wechatHeadImg: 'https://img-cdn-qiniu.dcloud.net.cn/new-page/ad.png'
      },
      inviteCode: '',
      inviteInfo: {}
    }
  },
  methods: {
    async login() {
      console.log('login')
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true, // 禁用背景点击
        loadingType: 'spinner',
        message: '绑定中'
      })
      if (this.type === 'bind') {
        if (!this.subObject.code) {
          this.$toast('请输入验证码')
          return
        }
        if (!this.subObject.mobile) {
          this.$toast('请输入手机号')
          return
        }
        const res = await mineApi.bindMobile({
          mobile: this.subObject.mobile,
          code: this.subObject.code
        }).catch(err => {
          console.log('err', err)
          this.$toast('服务器出错')
        })
        if (res.code !== 200) {
          return
        }
        this.$toast.clear()
        this.$toast('绑定成功')
        setTimeout(() => {
          this.$store.dispatch('GetUserInfo')
          this.$router.back()
        }, 500)
        return
      }
      this.$store.dispatch('LoginByUsername', this.subObject).then(() => {
        this.loading = false
        this.$router.push('/home')
      }).catch(() => {
        // this.$toast('账号或密码错误啦')
        this.loading = false
      })
    },
    async getVeri() {
      if (this.getVerify !== '获取验证码') {
        return
      }
      if (!(/^\d{8,11}$/.test(this.subObject.mobile.replace(/\s*/g, '')))) {
        this.$toast('请输入正确的手机号')
      } else {
        const res = await mineApi.getSms({
          mobile: this.subObject.mobile
        })
        if (res.code !== 200) {
          return
        }
        this.$toast('短信发送成功，请注意查收！')
        this.value = 60
        this.getVerify = this.value + 's'

        var timers = setInterval(() => {
          this.value--
          this.getVerify = this.value + 's'
          if (this.value <= 0) {
            clearInterval(timers)
            this.getVerify = '获取验证码'
          }
        }, 1000)
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/assets/css/mixin.scss";
@import 'src/assets/css/variables.scss';
  .wrapper {
    position: fixed;
    left: 0;
    top: 0;
    background: #fff;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*background-color: #000;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    // justify-content: center;
    .logo{
      width: 36%;
      margin-bottom: 30px;
      img{
        width: 100%;
      }
    }
    .userInput{
      margin: 20px 0;
      width: 90%;
      .inputBox{
        position: relative;
        .forget{
          color: $color-theme;
          position: absolute;
          right: 10px;
          font-size: 14px;
          top: 0;
          line-height: 36px;
        }
      }
    }
    .loginBtn{
      margin-top: 20px;
      font-size: 16px;
      color: white;
      /* background: -webkit-linear-gradient(left, #A38456, #CABA96); */
      background-color: $color-theme;
      line-height: 41px;
      text-align: center;
      border-radius: 5px;
      width: 90%;
    }
    .toRegister{
      color: $color-theme;
      text-decoration: underline;
      margin-top: 15px;

    }
  }
  .textinput{
    border-radius: 10px;
    margin: 20px 0;
    background-color: #f0f0f0;
  }
</style>
